import { createRouter, createWebHistory, createWebHashHistory } from "vue-router";

/*
  路由懒加载：
    1. 将路由组件单独打包成一个js文件（单独打包）
    2. 需要使用路由组件时才会加载js文件（按需加载）

  前端路由模式：
    1. hash
    2. history

    这两种路由模式有什么区别？
    1. hash模式路由路径带#(路径不美观)，history模式没有(路径美观)
    2. hash模式兼容性更好（ie8），history模式兼容性更差(ie10)
    3. 底层原理不一样：
      - hash模式，通过window.location.hash去修改路由路径，window.onhashchange事件来监听地址变化
      - history模式，通过window.history.pushState等方法去修改路由路径，window.history.onpopstate事件来监听地址变化
*/

const router = createRouter({
  // 配置对象：属性名是固定
  // 路由模式
  history: createWebHistory(),
  // 路由配置
  routes: [
    {
      path: "/home",
      name: "Home",
      component: () => import("../views/Home/index.vue"), // 使用路由懒加载
    },
    {
      path: "/about",
      name: "About",
      component: () => import("../views/About/index.vue"),
    },
    {
      path: "/",
      redirect: "/home",
    },
  ],
});

export default router;
